<template>
  <div class="comment-management-container">
    <!-- 页面标题 -->
    <el-page-header 
      @back="handleBack" 
      content="商品评论管理"
      class="page-header"
    />

 <!-- 筛选和搜索区域 -->
<el-card class="filter-card">
  <el-row :gutter="20">
    <!-- 评论内容搜索 -->
    <el-col :span="6">
      <el-input 
        v-model="pageParams.sccomments" 
        placeholder="搜索评论内容" 
        clearable
        @input="handleSearch"  
        @clear="handleSearch"  
      ></el-input>
    </el-col>
    
    <!-- 评分筛选 -->
    <el-col :span="4">
      <el-select 
        v-model="pageParams.scscore" 
        placeholder="筛选评分" 
        clearable
        @change="handleSearch"  
      >
        <el-option label="1星" value="1" />
        <el-option label="2星" value="2" />
        <el-option label="3星" value="3" />
        <el-option label="4星" value="4" />
        <el-option label="5星" value="5" />
      </el-select>
    </el-col>
    
    <!-- 评论状态筛选 -->
    <el-col :span="4">
      <el-select 
        v-model="pageParams.isDelete" 
        placeholder="评论状态" 
        clearable
        @change="handleSearch" 
      >
        <el-option label="正常显示" value="0" />
        <el-option label="已删除" value="1" />
      </el-select>
    </el-col>
    
    <!-- 用户名搜索 -->
    <el-col :span="4">
      <el-input 
        v-model="pageParams.uname" 
        placeholder="搜索用户名" 
        clearable
        @input="handleSearch"  
        @clear="handleSearch"  
      />
    </el-col>
    
    <!-- 商品名搜索 -->
    <el-col :span="4">
      <el-input 
        v-model="pageParams.sname" 
        placeholder="搜索商品名" 
        clearable
        @input="handleSearch"  
      />
    </el-col>
  </el-row>
</el-card>

    <!-- 评论列表 -->
    <el-card class="comment-list-card">
      <el-table 
        :data="comments" 
        border 
        stripe
        :loading="loading"
        empty-text="暂无评论数据"
      >
        
        <el-table-column 
          prop="user.uname" 
          label="用户名称" 
          width="150" 
          align="center"
        />
        
        <el-table-column 
          prop="shoe.sname" 
          label="商品名称" 
          width="200"
        />
        
        <el-table-column 
          prop="sccomments" 
          label="评论内容" 
          min-width="200"
        />
        
<el-table-column 
  prop="scscore" 
  label="评分" 
  width="150" 
  align="center"
>
  <template #default="scope">
    <el-rate 
      v-model="scope.row.scscore" 
      disabled 
      :max="5"
    />
  </template>
</el-table-column>
        
        <el-table-column 
          prop="sctime" 
          label="评论时间" 
          width="180" 
          align="center"
        >
        <template #default="scope">
            {{ formatDateTime(scope.row.sctime) }}
        </template>
        </el-table-column>
        <el-table-column 
          prop="isDelete" 
          label="状态" 
          width="120" 
          align="center"
        >
          <template #default="scope">
            <el-tag 
              :type="scope.row.isDelete === 0 ? 'success' : 'danger'"
            >
              {{ scope.row.isDelete === 0 ? '正常' : '已删除' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column 
          label="操作" 
          width="280" 
          align="center"
        >
          <template #default="scope">
            <el-button 
              text 
              type="primary" 
              @click="handleViewDetail(scope.row)"
              v-if="scope.row.isDelete === 0"
            >
              查看详情
            </el-button>
            
            <el-button 
              text 
              type="danger" 
              @click="handleDelete(scope.row)"
              v-if="scope.row.isDelete === 0"
            >
              删除
            </el-button>
            
            <el-button 
              text 
              type="success" 
              @click="handleRestore(scope.row)"
              v-if="scope.row.isDelete === 1"
            >
              恢复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
      <el-pagination
        :page-size="params.pageSize"
        :total="params.recordCount"
        v-model:current-page="params.pageNum"
        @current-change="handleCurrentChange"
        @prev-click="prevPage" 
        @next-click="nextPage"
        layout="total,prev,pager,next"
      />
      </div>
    </el-card>

    <!-- 删除确认对话框 -->
    <el-dialog 
      v-model="deleteDialogVisible" 
      title="删除评论" 
      width="400px"
    >
      <p>确定要删除这条评论吗？此操作可以恢复。</p>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="updateIsDeleteNow">确定删除</el-button>
      </template>
    </el-dialog>

    <!-- 恢复确认对话框 -->
    <el-dialog 
      v-model="restoreDialogVisible" 
      title="恢复评论" 
      width="400px"
    >
      <p>确定要恢复这条评论吗？恢复后将重新显示。</p>
      <template #footer>
        <el-button @click="restoreDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateIsDeleteNow">确定恢复</el-button>
      </template>
    </el-dialog>

    <!-- 评论详情对话框 -->
    <el-dialog 
      v-model="detailDialogVisible" 
      title="评论详情" 
      width="600px"
    >
      <div v-if="currentComment" class="comment-detail">
        <el-descriptions column="1" border>
          <el-descriptions-item label="评论ID">{{ currentComment.cid }}</el-descriptions-item>
          <el-descriptions-item label="用户名称">{{ currentComment.user.uname }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{ currentComment.shoe.sname }}</el-descriptions-item>
          <el-descriptions-item label="评论内容">{{ currentComment.sccomments }}</el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate v-model="currentComment.scscore" disabled :max="5" />
          </el-descriptions-item>
          <el-descriptions-item label="评论时间">{{ formatDateTime(currentComment.sctime)}}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="currentComment.isDelete === 0 ? 'success' : 'danger'">
              {{ currentComment.isDelete === 0 ? '正常' : '已删除' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { queryPage,updateIsDelete } from '@/api/Command';
import { useRouter } from 'vue-router';

// 在setup中获取router实例
const router = useRouter();
// 状态变量
const loading = ref(true);
//数据
const comments = ref([]);
// const currentPage = ref(1);
// const pageSize = ref(10);
//搜索评论内容
const searchKeyword = ref('');
//筛选评分
const scoreFilter = ref('');
//评论状态
const deleteFilter = ref('');
// 搜索用户名
const usernameFilter = ref('');
// 搜索商品名
const productFilter = ref('');
// 分页数据
const params = ref({
  pageNum: 1,
  pageSize: 5,
  recordCount: 0,
  pageCount: 0
});
// 查询数据
const pageParams=ref({
  sccomments: "",
  scscore:null,
  uname: "",
  sname:"",
  isDelete: null,
  pageNum: 1,
  pageSize: 5
})
// 对话框状态
const deleteDialogVisible = ref(false);
const restoreDialogVisible = ref(false);
const detailDialogVisible = ref(false);
const currentComment = ref(null);


// 模拟获取评论数据
const fetchComments = () => {
  loading.value = true;
  
  // 实际项目中这里会是API请求，获取评论数据后关联用户和商品名称

   queryPage(pageParams.value)
   .then(response=>{
      comments.value = response.list;
       console.log(comments.value)
      params.value = response.pager;
      loading.value=false
   }).catch(error=>{
    console.error('初始化查询失败:', error);
   })
};

const formatDateTime = (dateString) => {
  if (!dateString) return '';
  
  // 创建日期对象（兼容不同格式的输入）
  const date = new Date(dateString);
  
  // 检查日期是否有效
  if (isNaN(date.getTime())) return dateString;
  
  // 提取年月日时分秒
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  // 格式化并返回
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 方法
const handleBack = () => {
     router.back();
  // 返回上一页逻辑
};


const handleSearch=()=>{
    params.value.pageNum=1
    pageParams.value.pageNum=1
    fetchComments()
}
const handleCurrentChange = (val) => {
    console.log(val)
    params.value.pageNum=val
    pageParams.value.pageNum=val
    fetchComments()
};

const handleViewDetail = (comment) => {
  currentComment.value = comment;
  console.log(currentComment.value)
  detailDialogVisible.value = true;
};

const handleDelete = (comment) => {
  currentComment.value = comment;
  deleteDialogVisible.value = true;
};

const handleRestore = (comment) => {
  currentComment.value = comment;
  restoreDialogVisible.value = true;
};
const updateIsDeleteNow= () => {
    if(currentComment.value.isDelete===0){
        updateIsDelete(currentComment.value.cid,1)
        .then(res=>{
            deleteDialogVisible.value = false;
            fetchComments()
            ElMessage.success('评论已删除');
        }).catch(error=>{
            
        })
    }
    if(currentComment.value.isDelete===1){
                updateIsDelete(currentComment.value.cid,0)
        .then(res=>{
            restoreDialogVisible.value = false;
            fetchComments()
            ElMessage.success('评论已恢复');
        }).catch(error=>{
            
        })
    }
};



// 页面加载时获取数据
onMounted(() => {
  fetchComments();
});
</script>

<style scoped>
.comment-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
  padding: 15px;
}

.comment-list-card {
  padding: 15px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.comment-detail {
  margin-top: 10px;
}


</style>

